<template>
  <el-card shadow="hover" class="card">
    <div class="title">
      <div class="name ellipsis">第三章 函数与导数联系函数与导数联系函数与导数联系函数与导数联系</div>
      <div class="type">高三数学</div>
      <div class="status"
        :style="`--bgColor:${HomeworkTypeBgColor[0]};--color:${HomeworkTypeColor[0]}`"
      >{{HomeworkStatus[0]}}</div>
    </div>
    <div class="progress">
      <div class="info">
        <span class="label">完成情况</span>
        <span class="value">38/42人</span>
      </div>
      <el-progress :show-text="false" :percentage="100" />
      <div class="time">
        <div class="label">截止时间</div>
        <div class="value">2023-03-22 11:00</div>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" class="detail">查看详情</el-button>
      <el-button
        :icon="MoreFilled"
        class="more"
        ref="buttonRef"
        @v-click-outside="onMouseover"
        @mouseout.stop="onMouseout"
      ></el-button>

    </div>

    <!--  -->

  </el-card>
</template>
<script lang="ts" setup>
import {defineProps} from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'

import {HomeworkStatus,HomeworkTypeBgColor,HomeworkTypeColor} from 'types/homework-types';
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'

// const buttonRef = ref()
interface Props {
  // popoverRef: Element
  onMouseover:(e:Element)=>void,
  onMouseout:(e:Element) => void,
  data:any
}

const { data } = defineProps<Props>()

const detail = () => {

}
</script>
<style lang="scss" scoped>
@use "./index.scss"
</style>
